<template>
  <div class="flex-grow d-flex-col">
    <div class="m-b-10">
      <el-button type="primary" @click="addRow">添加一行</el-button>
      <el-button type="primary" @click="getEditData"
        >获取整个table数据</el-button
      >
    </div>
    <editable-grid
      v-if="isDBReady"
      ref="editable"
      mode="cellEdit"
      row-key="_id"
      :datas="tableData"
      :columns="columns"
      :table-props="{ stripe: true, size: 'mini' }"
      :formProps="formProps"
      :change="handleDataChange"
      :edit-btn-visible="true"
      :delete-btn-visible="true"
      :extra-change="handleCellChange"
      :extra-blur="handleCellBlur"
      @cell-click="handleCellClick"
    >
    </editable-grid>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
export default {
  props: {
    syncDatas: {
      type: Function,
      required: true
    },
    addDoc: {
      type: Function,
      required: true
    },
    updateDoc: {
      type: Function,
      required: true
    },
    deleteDoc: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      columns: [
        {
          prop: "text",
          label: "文本",
          width: "110"
        },
        {
          prop: "select",
          label: "select",
          width: "120"
        },
        {
          prop: "number",
          label: "number1",
          width: "120"
        },
        {
          prop: "date",
          label: "date",
          width: "160"
        },
        {
          prop: "time",
          label: "time",
          width: "160"
        },
        {
          prop: "switch",
          label: "switch",
          width: "60"
        },
        {
          prop: "radio",
          label: "radio",
          width: "160"
        },
        {
          prop: "cascader",
          label: "cascader",
          showOverflowTooltip: true
        }
      ],
      formProps: {
        props: {
          text: {
            type: "text"
          },
          select: {
            type: "select",
            multiple: true,
            options: [
              {
                value: "选项1",
                label: "黄金糕"
              },
              {
                value: "选项2",
                label: "双皮奶"
              },
              {
                value: "选项3",
                label: "蚵仔煎"
              },
              {
                value: "选项4",
                label: "龙须面"
              },
              {
                value: "选项5",
                label: "北京烤鸭"
              }
            ]
          },
          number: {
            type: "number",
            precision: 4
          },
          date: {
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd"
          },
          time: {
            type: "time"
          },
          switch: {
            type: "switch"
          },
          radio: {
            type: "radio",
            options: [
              {
                value: "选项1",
                label: "黄金糕"
              },
              {
                value: "选项2",
                label: "双皮奶"
              }
            ]
          },
          cascader: {
            type: "cascader",
            props: {
              multiple: true,
              checkStrictly: true
            },
            options: [
              {
                value: "zhinan",
                label: "指南",
                children: [
                  {
                    value: "shejiyuanze",
                    label: "设计原则设计原则设计原则",
                    children: [
                      {
                        value: "yizhi",
                        label: "一致"
                      },
                      {
                        value: "fankui",
                        label: "反馈"
                      },
                      {
                        value: "xiaolv",
                        label: "效率"
                      },
                      {
                        value: "kekong",
                        label: "可控"
                      }
                    ]
                  },
                  {
                    value: "daohang",
                    label: "导航",
                    children: [
                      {
                        value: "cexiangdaohang",
                        label: "侧向导航"
                      },
                      {
                        value: "dingbudaohang",
                        label: "顶部导航"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        },
        methods: {}
      },
      tableData: [],
      isCellValueChange: false,
      isDBReady: false,
      currentRow: ""
    };
  },
  methods: {
    addRow() {
      this.$refs.editable.addRow();
    },
    getEditData() {
      return this.$refs.editable.getData();
    },
    getTableData() {
      return new Promise((resolve, reject) => {
        const datas = [
          {
            _id: "c9f2bfbc-2501-4c48-b9b5-fdacc461f5b8-1",
            text: "2016-05-01",
            tag1: ["标签1", "标签2"],
            select: ["选项1", "选项3"],
            number: 1,
            date: "2021-4-28",
            time: "",
            switch: false,
            radio: "选项1",
            checkbox: ["选项1", "选项3"],
            cascader: [["zhinan"], ["zhinan", "daohang"]]
          },
          {
            _id: "c9f2bfbc-2501-4c48-b9b5-fdacc461f5b8-2",
            text: "2016-05-02",
            tag1: ["标签1", "标签2"],
            select: ["选项2"],
            number: 2,
            date: "2021-4-28",
            time: "",
            switch: true,
            radio: "选项2",
            checkbox: ["选项1", "选项3"],
            cascader: ["zhinan", "daohang", "cexiangdaohang"]
          },
          {
            _id: "c9f2bfbc-2501-4c48-b9b5-fdacc461f5b8-3",
            text: "2016-05-03",
            tag1: ["标签1", "标签2"],
            select: ["选项3"],
            number: 3,
            date: "2021-4-28",
            time: "",
            switch: false,
            radio: "选项2",
            checkbox: ["选项1", "选项3"],
            cascader: ["zhinan", "daohang", "cexiangdaohang"]
          },
          {
            _id: "c9f2bfbc-2501-4c48-b9b5-fdacc461f5b8-4",
            text: "2016-05-04",
            tag1: ["标签1", "标签2"],
            select: ["选项3"],
            number: 4,
            date: "2021-4-28",
            time: "",
            switch: false,
            radio: "选项2",
            checkbox: ["选项1", "选项3"],
            cascader: ["zhinan", "daohang", "cexiangdaohang"]
          }
        ];
        resolve(datas);
      });
    },
    handleCellClick(row) {
      this.currentRow = row;
    },
    handleCellChange(val) {
      this.isCellValueChange = true;
    },
    handleCellBlur({ isSelectOrCascader, value }) {
      if (isSelectOrCascader && value) return;
      if (!this.isCellValueChange || !this.currentRow) return;
      if (this.$dayjs(this.currentRow._id).isValid()) {
        return;
      }
      this.updateDoc(this.currentRow);
    },
    handleDataChange(events) {
      //新增
      if (events.type == "save") {
        this.currentRow = "";
        return new Promise((resolve, reject) => {
          if (events.row.text) {
            events.row._id = uuidv4();
            this.addDoc(events.row);
          } else {
            reject("文本列必填！");
          }
        });
      }
      //编辑
      if (events.type == "edit") {
        return new Promise((resolve, reject) => {
          if (events.row.text) {
            this.updateDoc(events.row);
          } else {
            reject("文本列必填！");
          }
        });
      }
      // 删除
      if (events.type == "delete") {
        return new Promise((resolve, reject) => {
          this.deleteDoc(events.row);
        });
      }
    },
    updateData(oldData, newData) {
      const datas = this.getEditData();
      const index = datas.findIndex(item => item._id === oldData._id);
      datas.splice(index, 1, newData);
      this.tableData = datas;
    },
    addData(newData, isFirst) {
      const datas = this.getEditData();
      isFirst && this.$refs.editable.cancelEdit(datas.length - 1);
      datas.push(newData);
      this.tableData = datas;
      this.$refs.editable.doLayout();
    },
    deleteData(_id) {
      const datas = this.getEditData();
      const index = datas.findIndex(item => item._id === _id);
      datas.splice(index, 1);
      this.tableData = datas;
      this.$refs.editable.doLayout();
    }
  },
  mounted() {
    this.getTableData().then(datas => {
      this.syncDatas(datas).then(resDatas => {
        this.tableData = resDatas;
        this.isDBReady = true;
      });
    });
  },
  beforeDestroy() {
    this.isDBReady = false;
  }
};
</script>

<style></style>
